<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>周末作业</title>



    <style>
        /* 1.计数器 */
        /* * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        } */
    </style>


    <style>
        /* 拖拽 */
        /* * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .拖拽 {
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        position: absolute;

    } */
    </style>





    <style>
        /* 9.鼠标拖尾 */
        /* img {
            position: absolute;
        } */
    </style>


</head>



<body>



    <!-- <div>
        <span class="counter">
            <button class="sub">-</button>
            <span>0</span>
            <button class="add">+</button>
        </span>

        <span class="counter">
            <button class="sub">-</button>
            <span>0</span>
            <button class="add">+</button>
        </span>

        <span class="counter">
            <button class="sub">-</button>
            <span>0</span>
            <button class="add">+</button>
        </span> -->
    </div>
    <script>// // 1.编写计数器案例
        // // 单个
        // let num = 10
        // let btns = document.querySelectorAll(".counter button")
        // let sub_btn = btns[0]
        // let add_btn = btns[1]
        // let num_ele = document.querySelector(".counter span")
        // num_ele.innerText = num

        // sub_btn.onclick = function () {
        //     num--
        //     num_ele.innerText = num
        // }

        // add_btn.onclick = function () {
        //     num++
        //     num_ele.innerText = num
        // }


        // // 多个
        // let nums = [10, 15, 20]
        // let counters = document.querySelectorAll(".counter")
        // counters.forEach(function (item, index) {
        //     let btns = item.querySelectorAll("button")
        //     let sub_btn = btns[0]
        //     let add_btn = btns[1]
        //     let num_ele = item.querySelector("span")
        //     num_ele.innerText = nums[index]

        //     sub_btn.onclick = function () {
        //         nums[index]--
        //         num_ele.innerText = nums[index]
        //     }

        //     add_btn.onclick = function () {
        //         nums[index]++
        //         num_ele.innerText = nums[index]
        //     }
        // })

    </script>










    <!-- <div class="拖拽"></div> -->
    <script>// // 2.编写鼠标拖动div案例
        // // 获取目标
        // let div = document.querySelector(".拖拽")

        // // 绑定事件
        // let mousemove_event = function (e) {        //  鼠标移动事件
        //     console.log("鼠标移动事件");
        //     console.log(e.pageX, e.pageY);
        //     div.style.left = e.pageX - offsetX + "px"
        //     div.style.top = e.pageY - offsetY + "px"
        // }


        // div.addEventListener("mousedown", function (e) {        //  鼠标按下事件
        //     div.addEventListener("mousemove", mousemove_event)

        //     let left = div.offsetLeft
        //     let top = div.offsetTop

        //     offsetX = e.pageX - left
        //     offsetY = e.pageY - top

        // })


        // div.addEventListener("mouseup", function () {       //  鼠标抬起事件
        //     div.removeEventListener("mousemove", mousemove_event)
        // })

    </script>





    <script>

        // 3.编写二级菜单（点击）

        // 4.编写三级菜单（点击）

        // 5.编写页签

        // 6.编写伸缩菜单

        // 7.编写点击回到顶部，页面逐渐滚动到顶部


        // 8.编写轮播图，点击切换轮播效果
    </script>




    <script>// // 9.鼠标拖尾特效
        // document.addEventListener("mousemove", function (e) {

        //     // 1.在内存中创建元素
        //     let img = document.createElement("img")

        //     // 3.设置元素属性
        //     img.setAttribute("src", "/素材/img/QQ.png")
        //     let width = Math.floor(Math.random() * 100) + 2
        //     img.style.width = width + "px"      //  图片大小随机


        //     img.style.left = (e.pageX - width / 2) + "px"   //  图片横坐标跟随鼠标，居中
        //     img.style.top = (e.pageY - width / 2) + "px"    //  图片纵坐标跟随鼠标，居中

        //     // 2.将元素插入父节点
        //     document.body.appendChild(img)   //  显示图标

        //     // 定时删除
        //     setTimeout(function () {
        //         img.remove()
        //     }, 100)
        // })
        
    </script>






</body>

</html>